/*
Theme Name: Minimal Monkey
Theme URI: http://www.minimalmonkey.co.uk/
Author: Stephen Burgess @minimalmonkey
Author URI: http://www.minimalmonkey.co.uk/
Description: Wordpress theme custom built for Stephen Burgess' blog
Version: 1.0
License: GNU General Public License v2 or later
License URI :http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: minimalmonkey
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
	display: block
}

audio,
canvas,
video {
	display: inline-block
}

audio:not([controls]) {
	display: none;
	height: 0
}

[hidden],
template {
	display: none
}

a:focus {
	outline: thin dotted
}

a:active,
a:hover {
	outline: 0
}

abbr[title] {
	border-bottom: 1px dotted
}

dfn {
	font-style: italic
}

hr {
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	height: 0
}

mark {
	background: #ff0;
	color: #000
}

code,
kbd,
pre,
samp {
	font-family: monospace, serif;
	font-size: 1em
}

pre {
	white-space: pre-wrap
}

small {
	font-size: 80%
}

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline
}

sup {
	top: -.5em
}

sub {
	bottom: -.25em
}

svg:not(:root) {
	overflow: hidden
}

figure {
	margin: 0
}

fieldset {
	border: 1px solid silver;
	margin: 0 2px;
	padding: .35em .625em .75em
}

legend {
	border: 0;
	padding: 0
}

button,
input,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	margin: 0
}

button,
input {
	line-height: normal
}

button,
select {
	text-transform: none
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
	-webkit-appearance: button;
	cursor: pointer
}

button[disabled],
html input[disabled] {
	cursor: default
}

input[type="checkbox"],
input[type="radio"] {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0
}

input[type="search"] {
	-webkit-appearance: textfield;
	-moz-box-sizing: content-box;
	box-sizing: content-box
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none
}

button::-moz-focus-inner,
input::-moz-focus-inner {
	border: 0;
	padding: 0
}

textarea {
	overflow: auto;
	vertical-align: top
}

table {
	border-collapse: collapse;
	border-spacing: 0
}

html,
body {
	height: 100%
}

* {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition-timing-function: ease-out;
	-webkit-font-smoothing: antialiased
}

.site {
	min-height: 100%;
	position: relative;
	top: 0;
	-webkit-transform: translateY(0);
	transform: translateY(0);
	-webkit-transition: background-color .3s ease-in-out .05s, margin 0 linear .3s, -webkit-transform .3s, top .3s;
	transition: background-color .3s ease-in-out .05s, margin 0s linear .3s, transform .3s, top .3s;
	z-index: 2
}

.site.no-bg-transition {
	-webkit-transition: margin 0 linear .3s, -webkit-transform .3s, top .3s;
	transition: margin 0s linear .3s, transform .3s, top .3s
}

.site.black {
	background: #181818
}

.mm.home .site,
.home .site {
	background: #fff
}

.showheader .site,
.page .site {
	top: 408px
}

.lab.showheader .site {
	margin-bottom: 0
}

.site-block {
	background: #000;
	bottom: 0;
	cursor: pointer;
	display: none;
	left: 0;
	opacity: 0;
	position: fixed;
	top: 52px;
	-webkit-transform: translateY(0);
	transform: translateY(0);
	-webkit-transition: opacity .3s, width 0 linear .3s, -webkit-transform .3s;
	transition: opacity .3s, width 0s linear .3s, transform .3s;
	width: 0;
	z-index: 40
}

.site-block.color {
	-webkit-transition: none;
	transition: none;
	opacity: 1
}

.site-block.color-fade {
	opacity: 1;
	-webkit-transition: opacity .3s;
	transition: opacity .3s
}

.clearblock .site-block {
	cursor: default;
	width: 100%
}

.showheader .site-block,
.page .site-block {
	opacity: .6;
	-webkit-transform: translateY(298px);
	transform: translateY(298px);
	-webkit-transition: opacity .3s, width 0, -webkit-transform .3s;
	transition: opacity .3s, width 0s, transform .3s;
	width: 100%
}

.showheader .site-block:hover,
.page .site-block:hover {
	opacity: .4
}

.showheader.single-post .site-block,
.page.single-post .site-block {
	opacity: .4
}

.showheader.single-post .site-block:hover,
.page.single-post .site-block:hover {
	opacity: .3
}

@font-face {
	font-family: 'icons';
	src: url("fonts/icons.eot");
	src: url("fonts/icons.eot?#iefix") format("embedded-opentype"), url("fonts/icons.woff") format("woff"), url("fonts/icons.ttf") format("truetype"), url("fonts/icons.svg#icons") format("svg");
	font-style: normal;
	font-weight: 400
}

.icon {
	font-family: 'icons';
	font-size: 16px
}

.contact-buttons {
	margin: 34px -18px
}

.contact-button {
	display: inline-block;
	overflow: hidden;
	position: relative;
	text-decoration: none;
	border: 2px solid #cfcfcf;
	border-radius: 65px;
	color: #cfcfcf;
	font-family: 'icons';
	font-size: 29px;
	height: 65px;
	margin: 0 4px;
	-webkit-transition: border .35s;
	transition: border .35s;
	vertical-align: middle;
	width: 65px
}

.contact-button:hover span {
	padding-top: 65px
}

.contact-button span {
	display: block;
	height: 65px;
	line-height: 65px;
	-webkit-transition: padding-top .35s;
	transition: padding-top .35s
}

.contact-button span:first-child {
	margin-top: -65px
}

.contact-button.twitter:hover {
	border: 2px solid #32abdf
}

.contact-button.twitter span:first-child {
	color: #32abdf
}

.contact-button.linkedin {
	font-size: 34px
}

.contact-button.linkedin:hover {
	border: 2px solid #1875b2
}

.contact-button.linkedin span:first-child {
	color: #1875b2
}

.contact-button.linkedin span {
	line-height: 60px
}

.contact-button.email {
	font-size: 34px
}

.contact-button.email:hover {
	border: 2px solid #e24e4b
}

.contact-button.email span:first-child {
	color: #e24e4b
}

.contact-button.email span {
	line-height: 58px;
	padding-right: 3px
}

.contact-button.codepen {
	font-size: 37px
}

.contact-button.codepen:hover {
	border: 2px solid #72616e
}

.contact-button.codepen span:first-child {
	color: #72616e
}

.contact-button.codepen span {
	line-height: 61px
}

.touch .contact-button:hover {
	border: 2px solid #cfcfcf
}

.touch .contact-button:hover span {
	padding-top: 0
}

.lab .contact-button {
	border-color: #666;
	color: #666
}

.next-button {
	background-color: #fff;
	color: #b3b3b3;
	font-family: 'icons';
	font-size: 55px;
	height: 53px;
	line-height: 53px;
	overflow: hidden;
	text-align: center;
	z-index: 100
}

.next-button:before,
.next-button:after {
	content: '\\';
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	-webkit-transition: -webkit-transform .5s;
	transition: transform .5s;
	width: 100%;
	z-index: 1
}

.next-button:after {
	color: #999;
	top: -100%
}

.next-button:hover:before,
.next-button:hover:after {
	-webkit-transform: translateY(100%);
	transform: translateY(100%)
}

.next-button a {
	display: block;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 100
}

.next-button.vertical {
	position: relative;
	width: 100%
}

.next-button.horizontal {
	-webkit-transition: right .35s;
	transition: right .35s;
	display: none
}

.next-button.loading:hover:before,
.next-button.loading:hover:after {
	-webkit-transform: translateX(0);
	transform: translateX(0)
}

.next-button.loading:before {
	-webkit-animation: next-load .3s steps(15)0 infinite;
	animation: next-load .3s steps(15)0 infinite;
	color: #ccc;
	content: 'l';
	font-size: 35px;
	-webkit-transform: translateX(0);
	transform: translateX(0)
}

.no-js .single-post .next-button,
.no-js .page .next-button {
	display: none
}

.closecontainer {
	margin: 0 auto;
	max-width: 950px;
	opacity: 0;
	position: fixed;
	top: -1000px;
	-webkit-transform: translate3d(0, 300px, 0);
	transform: translate3d(0, 300px, 0);
	-webkit-transition: opacity .3s, -webkit-transform .3s, top 0 linear .3s;
	transition: opacity .3s, transform .3s, top 0s linear .3s;
	width: 100%;
	z-index: 30
}

.single-post .closecontainer {
	opacity: 1;
	top: 52px;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	-webkit-transition: opacity .3s ease-out .3s, -webkit-transform .3s, top 0;
	transition: opacity .3s ease-out .3s, transform .3s, top 0s
}

.nudge-right.single-post .closecontainer {
	-webkit-transform: translate3d(30px, 0, 0);
	transform: translate3d(30px, 0, 0)
}

.nudge-left.single-post .closecontainer {
	-webkit-transform: translate3d(-30px, 0, 0);
	transform: translate3d(-30px, 0, 0)
}

.slideoff-right.single-post .closecontainer {
	-webkit-transform: translate3d(100%, 0, 0);
	transform: translate3d(100%, 0, 0)
}

.prepare.slideoff-right.single-post .closecontainer {
	-webkit-transition: none;
	transition: none
}

.prepare.slideoff-right.single-post .closecontainer,
.slideoff-left.single-post .closecontainer {
	-webkit-transform: translate3d(-100%, 0, 0);
	transform: translate3d(-100%, 0, 0)
}

.prepare.slideoff-left.single-post .closecontainer {
	-webkit-transition: none;
	transition: none;
	-webkit-transform: translate3d(100%, 0, 0);
	transform: translate3d(100%, 0, 0)
}

.slideoff-right.single-post .closecontainer,
.slideoff-left.single-post .closecontainer {
	-webkit-transition: opacity .3s, -webkit-transform .3s;
	transition: opacity .3s, transform .3s;
	opacity: 0
}

.showheader.single-post .closecontainer,
.page.single-post .closecontainer {
	-webkit-transform: translate3d(0, 408px, 0);
	transform: translate3d(0, 408px, 0)
}

.closebutton {
	border-radius: 30px;
	height: 30px;
	position: absolute;
	right: 10px;
	text-decoration: none;
	top: 5px;
	-webkit-transform: rotate(-180deg);
	transform: rotate(-180deg);
	-webkit-transition: border .3s, box-shadow .3s, -webkit-transform .3s;
	transition: border .3s, box-shadow .3s, transform .3s;
	width: 30px;
	z-index: 1
}

.closebutton:after {
	color: #afafaf;
	content: "x";
	font-size: 14px;
	height: 28px;
	left: 0;
	line-height: 28px;
	text-align: center;
	top: 0;
	width: 28px
}

.closebutton:after,
.site:after {
	font-family: 'icons';
	position: absolute
}



.followwrap {
	-webkit-animation: fly-intro .2s steps(4)0 6;
	animation: fly-intro .2s steps(4)0 6;
	background-image: url(images/larry.svg);
	background-repeat: no-repeat;
	background-size: 36px;
	display: block;
	height: 36px;
	margin-top: 8px;
	padding: 8px 44px;
	position: absolute;
	right: -172px;
	top: 0;
	-webkit-transition: right .5s;
	transition: right .5s;
	width: 216px;
	z-index: 2
}

.followwrap:hover,
.followwrap.open {
	-webkit-animation: fly .2s steps(4)0 8;
	animation: fly .2s steps(4)0 8
}

.twitter-follow-link {
	display: block;
	height: 52px;
	left: 3px;
	position: absolute;
	top: 0;
	width: 52px
}

.sharewrap {
	float: right;
	overflow: hidden;
	padding-top: 1px;
	text-align: right;
	width: 200px
}

.sharewrap .wrap {
	display: inline-block;
	vertical-align: middle
}

.sharewrap .wrap.twrap {
	margin-top: -4px
}

.sharewrap .wrap.fwrap {
	margin-top: -13px
}

.top-nav {
	font-size: 12px;
	font-weight: 600;
	height: 52px;
	letter-spacing: 2px;
	width: 100%;
	z-index: 11
}

.top-nav .links {
	display: inline-block;
	height: 52px;
	line-height: 16px;
	margin: 0;
	padding: 19px 37px 0 0;
	position: relative;
	width: 50%;
	vertical-align: top;
	z-index: 1
}

.top-nav .links:last-child {
	padding-left: 38px;
	padding-right: 0
}

.top-nav .links:last-child a {
	float: left;
	margin-left: 0;
	margin-right: 22px
}

.top-nav .links a {
	display: inline-block;
	height: 16px;
	overflow: hidden;
	position: relative;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	color: #898989;
	float: right;
	margin-left: 22px;
	text-transform: uppercase;
	-webkit-transition: border-bottom 0;
	transition: border-bottom 0
}

.top-nav .links a:hover span {
	padding-top: 16px
}

.top-nav .links a span {
	display: block;
	height: 16px;
	line-height: 16px;
	-webkit-transition: padding-top .3s;
	transition: padding-top .3s
}

.top-nav .links a span:first-child {
	margin-top: -16px
}

.top-nav .links a.selected span {
	padding-top: 16px
}

.top-nav .links a.selected {
	border-bottom: 1px solid #444;
	-webkit-transition: border-bottom .3s;
	transition: border-bottom .3s
}

.top-nav .links a.selected.no-transition,
.top-nav .links a.selected.no-transition span {
	-webkit-transition: none;
	transition: none
}

.top-nav .links span:first-child {
	color: #444
}

.touch .top-nav .links a:hover span {
	padding-top: 0
}

.touch .top-nav .links a.selected:hover span {
	padding-top: 16px
}

.mm .top-nav .links a.selected {
	border-bottom: 1px solid #16528e
}

.mm .top-nav .links span:first-child {
	color: #16528e
}

.top-nav .logo {
	border: 3px solid #000;
	color: #000;
	display: inline-block;
	font-family: 'icons';
	font-size: 25px;
	height: 22px;
	left: 50%;
	margin: 15px 0 0 -12px;
	position: absolute;
	text-decoration: none;
	top: 0;
	-webkit-transform: rotate(0);
	transform: rotate(0);
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	-webkit-transition: border .3s, -webkit-transform .3s ease-out;
	transition: border .3s, transform .3s ease-out;
	width: 22px;
	z-index: 2
}

.top-nav .logo:after {
	background: #000;
	border-radius: 10px;
	content: '';
	height: 10px;
	left: 3px;
	position: absolute;
	-webkit-transition: background .3s;
	transition: background .3s;
	top: 3px;
	width: 10px
}

.top-nav .logo:hover,
.top-nav .logo.bounce {
	-webkit-transform: rotate(270deg);
	transform: rotate(270deg)
}

.mm .top-nav .logo {
	border: none;
	border-radius: 0;
	height: 24px;
	margin-top: 13px;
	-webkit-transform-origin: 50% 100%;
	transform-origin: 50% 100%;
	-webkit-transition: color .3s;
	transition: color .3s;
	width: 24px
}

.mm .top-nav .logo:after {
	background: 0 0;
	content: 'm';
	left: 0;
	position: absolute;
	top: 0
}

.mm .top-nav .logo:hover,
.mm .top-nav .logo.bounce {
	-webkit-animation: logo-jump .5s 1;
	animation: logo-jump .5s 1;
	-webkit-transform: none;
	transform: none
}

.lab .top-nav .logo {
	border-color: #fff;
	color: #fff
}

.lab .top-nav .logo:after {
	background: #fff
}

.lab.mm .top-nav .logo:after {
	background: 0 0
}

.lab .top-nav .links a.selected {
	border-bottom: 1px solid #fff
}

.lab .top-nav .links span:first-child {
	color: #fff
}

.mm.single-post .arrow.decolor .color {
	background: #888
}

.mm.single-post .arrow.offblack .color {
	background: #181818
}

.mm.single-post .arrow.orange .color {
	background: #e8846b
}

.mm.single-post .arrow.navy .color {
	background: #16528e
}

.mm.single-post .arrow.red .color {
	background: #e54b4b
}

.mm.single-post .arrow.lime .color {
	background: #a2c5bf
}

.mm.single-post .arrow.green .color {
	background: #167c80
}

.mm.single-post .arrow.blue .color {
	background: #0082c8
}

.mm.single-post .arrow.purple .color {
	background: #72616e
}

.comments {
	margin: 0 auto;
	max-width: 640px;
	padding-top: 30px
}

.comments ol {
	margin: 0;
	padding: 60px 0 0
}

.comments li {
	list-style-type: none;
	margin-bottom: 30px;
	-webkit-transition: opacity .35s ease-out .35s;
	transition: opacity .35s ease-out .35s
}

.comments li.hide {
	opacity: 0
}

.published {
	display: inline-block;
	font-weight: 600;
	padding-bottom: 40px
}

.gravatar {
	float: left;
	height: 60px;
	margin: 0
}

.gravatar img {
	border-radius: 60px
}

.comment-wrapper {
	font-size: 14px;
	padding-left: 80px
}

.comment-author {
	display: inline-block;
	float: left;
	font-weight: 500;
	margin-right: 5px
}

.comment-author a {
	color: #2D2D2D;
	text-decoration: none
}

.comment-text p {
	margin: 0
}

.comment-date {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase
}

.comments-button {
	border-bottom: 2px solid rgba(0, 0, 0, .19);
	color: #fff;
	cursor: pointer;
	display: inline-block;
	font-size: 20px;
	font-weight: 600;
	line-height: 60px;
	margin: 0;
	text-align: center;
	-webkit-transition: background-color .3s, border-bottom .3s;
	transition: background-color .3s, border-bottom .3s;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	width: 100%
}

.notouch .comments-button:hover.decolor {
	background-color: #7b7b7b
}

.notouch .comments-button:hover.offblack {
	background-color: #151515
}

.notouch .comments-button:hover.orange {
	background-color: #d37861
}

.notouch .comments-button:hover.navy {
	background-color: #144a81
}

.notouch .comments-button:hover.red {
	background-color: #d04444
}

.notouch .comments-button:hover.lime {
	background-color: #93b3ad
}

.notouch .comments-button:hover.green {
	background-color: #147074
}

.notouch .comments-button:hover.blue {
	background-color: #0076b6
}

.notouch .comments-button:hover.purple {
	background-color: #675864
}

.comments-form-wrapper {
	height: 0;
	opacity: 0;
	overflow: hidden;
	-webkit-transition: height .5s, opacity .5s;
	transition: height .5s, opacity .5s
}

.comments-form-wrapper.open {
	opacity: 1
}

.comments-form-wrapper p {
	margin: 0 0 15px
}

#target-submit {
	display: none
}

textarea {
	outline: none
}

.decolor-text {
	color: #888
}

.offblack-text {
	color: #181818
}

.orange-text {
	color: #e8846b
}

.navy-text {
	color: #16528e
}

.red-text {
	color: #e54b4b
}

.lime-text {
	color: #a2c5bf
}

.green-text {
	color: #167c80
}

.blue-text {
	color: #0082c8
}

.purple-text {
	color: #72616e
}

.no-js .published {
	padding-bottom: 0
}

.no-js .comments-button {
	display: none
}

.header {
	background-color: #f3f3f3;
	box-shadow: 0 0 1px 1px rgba(0, 0, 0, .04);
	position: fixed;
	text-align: center;
	-webkit-transition: background-color .3s, height .3s, -webkit-transform .3s;
	transition: background-color .3s, height .3s, transform .3s;
	width: 100%;
	z-index: 3
}

.header,
.intro .header {
	height: 52px;
	overflow: hidden
}

.showheader .header,
.page .header {
	background-color: #fcfcfc;
	height: 460px
}

.header h1 {
	color: #666;
	font-size: 34px;
	margin: 10px 10px 0
}

.header p {
	line-height: 25px;
	margin: 15px 0 25px
}

.mm .header h1 {
	color: #e54b4b
}

.header .container {
	bottom: 0;
	color: #696969;
	font-size: 17px;
	position: absolute;
	top: 140px;
	width: 100%
}

.header .page {
	bottom: 0;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	top: 0;
	width: 0
}

.header .page.show {
	opacity: 1;
	width: 100%
}

.header .page:before {
	content: '';
	height: 100%
}

.header .page:before,
.header .content {
	display: inline-block;
	vertical-align: middle
}

.header .content {
	left: 0;
	opacity: 1;
	padding: 0 18px;
	position: relative;
	width: 100%
}

.showheader .header .page {
	-webkit-transition: opacity .35s, width 0 linear .35s;
	transition: opacity .35s, width 0s linear .35s
}

.showheader .header .page.show {
	-webkit-transition: opacity .35s, width 0;
	transition: opacity .35s, width 0s
}

.lab .header {
	background-color: #111
}

.lab .header h1 {
	color: #fff
}

.lab .header .container {
	color: #999
}

.lab.mm .header h1 {
	color: #e54b4b
}

.lab.showheader .header,
.lab.page .header {
	background-color: #000
}

.panels {
	background-color: inherit;
	bottom: 0;
	display: block;
	min-height: 460px;
	position: relative;
	top: 52px;
	-webkit-transition: opacity .3s;
	transition: opacity .3s;
	width: 100%;
	z-index: 2
}

.panels.hide {
	display: none;
	height: 0;
	width: 0
}

.intro-transition .panels,
.lab .panels {
	background-color: transparent
}

.js .hidehome .panels {
	opacity: 0
}

.js .hidehome.home .panels {
	opacity: 1
}

.panel {
	background: #888;
	color: #fff;
	display: block;
	min-width: 20%;
	padding-bottom: 15px;
	position: relative;
	text-decoration: none;
	-webkit-transition: background-color .35s, color .35s, margin .45s, -webkit-transform .5s;
	transition: background-color .35s, color .35s, margin .45s, transform .5s;
	width: 100%
}

.panel:hover .color {
	z-index: 3
}

.panel:hover .content {
	z-index: 4
}

.panel:nth-child(2) {
	-webkit-transition: background-color .35s, color .35s, margin .45s, -webkit-transform .5s ease-out .02222s;
	transition: background-color .35s, color .35s, margin .45s, transform .5s ease-out .02222s
}

.panel:nth-child(3) {
	-webkit-transition: background-color .35s, color .35s, margin .45s, -webkit-transform .5s ease-out .13333s;
	transition: background-color .35s, color .35s, margin .45s, transform .5s ease-out .13333s
}

.panel:nth-child(4) {
	-webkit-transition: background-color .35s, color .35s, margin .45s, -webkit-transform .5s ease-out .24444s;
	transition: background-color .35s, color .35s, margin .45s, transform .5s ease-out .24444s
}

.panel:nth-child(5) {
	-webkit-transition: background-color .35s, color .35s, margin .45s, -webkit-transform .5s ease-out .35556s;
	transition: background-color .35s, color .35s, margin .45s, transform .5s ease-out .35556s
}

.panel:nth-child(6) {
	-webkit-transition: background-color .35s, color .35s, margin .45s, -webkit-transform .5s ease-out .46667s;
	transition: background-color .35s, color .35s, margin .45s, transform .5s ease-out .46667s
}

.panel:nth-child(7) {
	-webkit-transition: background-color .35s, color .35s, margin .45s, -webkit-transform .5s ease-out .57778s;
	transition: background-color .35s, color .35s, margin .45s, transform .5s ease-out .57778s
}

.panel:nth-child(8) {
	-webkit-transition: background-color .35s, color .35s, margin .45s, -webkit-transform .5s ease-out .68889s;
	transition: background-color .35s, color .35s, margin .45s, transform .5s ease-out .68889s
}

.panel:nth-child(9) {
	-webkit-transition: background-color .35s, color .35s, margin .45s, -webkit-transform .5s ease-out .8s;
	transition: background-color .35s, color .35s, margin .45s, transform .5s ease-out .8s
}

.panel:nth-child(10) {
	-webkit-transition: background-color .35s, color .35s, margin .45s, -webkit-transform .5s ease-out .91111s;
	transition: background-color .35s, color .35s, margin .45s, transform .5s ease-out .91111s
}

.no-transition .panel {
	-webkit-transition: none;
	transition: none
}

.panel .small {
	padding: 0 2px;
}

.panel h1 {
	font-size: 45px;
	line-height: 45px;
	margin: 0
}

.panel .excerpt {
	display: block;
	font-size: 17px;
	line-height: 1.5;
	opacity: .5;
	margin-top: 3.5rem;
	-webkit-transition: opacity .35s;
	transition: opacity .35s
}

.panel .read {
	bottom: 30px;
	display: block;
	position: absolute
}

.panel .read .icon {
	display: block;
	float: left;
	font-size: 17px;
	margin: -2px 0 0 -2px;
	padding: 0 6px 0 0;
	text-transform: none
}

.panel .footer {
	background-color: rgba(0, 0, 0, .23);
	bottom: 10px;
	height: 81px;
	left: 0;
	position: absolute;
	right: 0;
	-webkit-transform: scaleY(0);
	transform: scaleY(0);
	-webkit-transform-origin: 50% 100%;
	transform-origin: 50% 100%;
	-webkit-transition: -webkit-transform .35s;
	transition: transform .35s
}

.selected .color,
.selected:hover .color {
	z-index: 15
}

.selected .content,
.selected:hover .content {
	z-index: 17
}

.panel .color {
	background-color: inherit;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	-webkit-transition: -webkit-transform .35s;
	transition: transform .35s;
	width: 100%;
	z-index: 1
}

.panel.selected .content {
	opacity: 0
}

.panel .content {
	height: auto;
	left: 0;
	opacity: 1;
	overflow: hidden;
	position: relative;
	top: 0;
	-webkit-transition: opacity .45s;
	transition: opacity .45s;
	width: 100%;
	z-index: 2
}

.panel .content .fixed {
	padding: 44px 38px 68px
}

.decolor,
.mm .decolor {
	background: #888
}

.mm .offblack {
	background: #181818
}

.mm .orange {
	background: #e8846b
}

.mm .navy {
	background: #16528e
}

.mm .red {
	background: #e54b4b
}

.mm .lime {
	background: #a2c5bf
}

.mm .green {
	background: #167c80
}

.mm .blue {
	background: #0082c8
}

.mm .purple {
	background: #72616e
}

.article {
	background: #fff;
	color: #2d2d2d;
	font-size: 16px;
	line-height: 24px;
	margin: 0 auto;
	max-width: 950px;
	opacity: 0;
	padding: 0;
	position: relative;
	top: 52px;
	-webkit-transform: translate3d(0, 300px, 0);
	transform: translate3d(0, 300px, 0);
	-webkit-transition: border-color .3s ease-in-out .05s, opacity .3s, padding 0 linear .3s, -webkit-transform .3s, width 0 linear .3s;
	transition: border-color .3s ease-in-out .05s, opacity .3s, padding 0s linear .3s, transform .3s, width 0s linear .3s;
	width: 0
}

.article.hide {
	height: 0;
	overflow: hidden
}

.article .post {
	width: 100%
}

.article h1 {
	color: #2d2d2d;
	font-size: 40px;
	line-height: 48px;
	margin: 8px auto 0;
	max-width: 640px;
	text-align: center
}

.article .small {
	color: #c8c8c8;
	display: block;
	font-size: 12px;
	font-weight: 600;
	padding: 0 2px;
	text-align: center;
	text-transform: uppercase
}

.single-post .article {
	min-height: 100%;
	opacity: 1;
	padding: 28px 5% 75px;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	-webkit-transition: border-color .3s ease-in-out .05s, opacity .3s, padding 0, -webkit-transform .3s, width 0;
	transition: border-color .3s ease-in-out .05s, opacity .3s, padding 0s, transform .3s, width 0s;
	width: 100%
}

.post-content {
	margin: 0 auto;
	max-width: 640px;
	padding: 9px 0 0
}

.post-content img {
	max-width: 100%
}

.post-content p {
	margin: 25px 0
}

.post-content a {
	color: #16528e;
	text-decoration: none
}

.post-content a:hover {
	text-decoration: underline
}

.nudge-right.single-post .article {
	-webkit-transform: translate3d(30px, 0, 0);
	transform: translate3d(30px, 0, 0)
}

.nudge-left.single-post .article {
	-webkit-transform: translate3d(-30px, 0, 0);
	transform: translate3d(-30px, 0, 0)
}

.slideoff-right.single-post .article {
	-webkit-transform: translate3d(100%, 0, 0);
	transform: translate3d(100%, 0, 0)
}

.prepare.slideoff-right.single-post .article {
	-webkit-transition: none;
	transition: none
}

.prepare.slideoff-right.single-post .article,
.slideoff-left.single-post .article {
	-webkit-transform: translate3d(-100%, 0, 0);
	transform: translate3d(-100%, 0, 0)
}

.prepare.slideoff-left.single-post .article {
	-webkit-transform: translate3d(100%, 0, 0);
	transform: translate3d(100%, 0, 0);
	-webkit-transition: none;
	transition: none
}

.slideoff-right.single-post .article,
.slideoff-left.single-post .article {
	opacity: 0
}

.decolor .article {
	border-left: 3px solid #888;
	border-right: 3px solid #888
}

.offblack .article {
	border-left: 3px solid #181818;
	border-right: 3px solid #181818
}

.orange .article {
	border-left: 3px solid #e8846b;
	border-right: 3px solid #e8846b
}

.navy .article {
	border-left: 3px solid #16528e;
	border-right: 3px solid #16528e
}

.red .article {
	border-left: 3px solid #e54b4b;
	border-right: 3px solid #e54b4b
}

.lime .article {
	border-left: 3px solid #a2c5bf;
	border-right: 3px solid #a2c5bf
}

.green .article {
	border-left: 3px solid #167c80;
	border-right: 3px solid #167c80
}

.blue .article {
	border-left: 3px solid #0082c8;
	border-right: 3px solid #0082c8
}

.purple .article {
	border-left: 3px solid #72616e;
	border-right: 3px solid #72616e
}

.error404 .wrap404 {
	opacity: 1;
	-webkit-transition: opacity .5s;
	transition: opacity .5s
}

.wrap404 {
	background: url(http://placekitten.com/g/600/300) no-repeat center center fixed;
	background-size: cover;
	bottom: 0;
	color: #fff;
	left: 0;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	text-align: center;
	top: 52px;
	-webkit-transition: opacity .3s;
	transition: opacity .3s;
	width: 100%;
	z-index: 1
}

.wrap404 h1 {
	display: block;
	font-size: 90px;
	left: 50%;
	line-height: inherit;
	margin: 0;
	opacity: .5;
	position: absolute;
	top: 50%;
	-webkit-transform: translateX(-50%)translateY(-50%);
	transform: translateX(-50%)translateY(-50%)
}

.lab .labwrap {
	bottom: 0;
	opacity: 1;
	width: 100%
}

.lab .labwrap .greyscale {
	cursor: none
}

.labwrap {
	bottom: auto;
	left: 0;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	top: 0;
	width: 0;
	z-index: 2
}

@media (min-width:570px) {

	body.intro-transition,
	body.showheader,
	body.page {
		overflow: hidden
	}

	.no-js body.intro-transition {
		overflow: visible
	}

	.single-post .site {
		padding-bottom: 52px
	}

	.showheader .site,
	.page .site {
		top: 298px
	}

	.js .intro:after {
		-webkit-transform: scaleY(1);
		transform: scaleY(1)
	}

	.site-block {
		display: block
	}

	.contact-button {
		margin: 0 10px
	}

	.next-button.vertical {
		display: none
	}

	.next-button.horizontal {
		display: block
	}

	.next-button {
		bottom: 0;
		height: 53px;
		position: fixed;
		right: 0;
		width: 53px;
		z-index: 10
	}

	.next-button:before {
		content: '/';
		top: 0
	}

	.next-button:after {
		content: '/';
		top: 0;
		left: -100%
	}

	.next-button:hover:before,
	.next-button:hover:after {
		-webkit-transform: translateX(100%);
		transform: translateX(100%)
	}

	.js .next-button {
		right: -53px
	}

	.js .next-button.show {
		right: 0
	}

	.showheader.single-post .closecontainer,
	.page.single-post .closecontainer {
		-webkit-transform: translate3d(0, 298px, 0);
		transform: translate3d(0, 298px, 0)
	}

	.closebutton {
		border: 1px solid #afafaf;
		border-radius: 30px;
		height: 30px;
		right: 20px;
		top: 15px;
		width: 30px
	}

	.closebutton:after {
		height: 28px;
		line-height: 28px;
		width: 28px
	}

	.single-post .closebutton {
		-webkit-transform: rotate(0);
		transform: rotate(0)
	}

	.single-post .closebutton:hover {
		border: 1px solid transparent;
		box-shadow: 0 0 0 4px #e1e1e1;
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg)
	}

	.touch.single-post .closebutton:hover {
		border: 1px solid #afafaf;
		box-shadow: none;
		-webkit-transform: rotate(0);
		transform: rotate(0)
	}

	.mm.intro-transition .site:after {
		color: #eee;
		content: "M";
		font-size: 100px;
		height: 110px;
		line-height: 110px;
		margin: -81px 0 0 -55px;
		opacity: 1;
		width: 110px
	}

	.followwrap:hover,
	.followwrap.open {
		right: 0
	}

	.twitter-follow-link {
		display: none
	}

	.mm.single-post .arrow {
		background: 0 0
	}

	.single-post .arrow {
		background: 0 0;
		bottom: 0;
		display: block;
		overflow: hidden;
		position: fixed;
		text-decoration: none;
		top: 52px;
		-webkit-transform: translateY(0);
		transform: translateY(0);
		-webkit-transition: left .3s, right .3s, -webkit-transform .3s;
		transition: left .3s, right .3s, transform .3s;
		width: 20px;
		z-index: 20
	}

	.single-post .arrow:hover:after {
		opacity: 1
	}

	.single-post .arrow:after {
		color: #fff;
		content: ">";
		font-family: 'icons';
		font-size: 30px;
		font-weight: 900;
		height: 66px;
		left: -5px;
		line-height: 66px;
		margin-top: -33px;
		opacity: 0;
		position: absolute;
		text-align: center;
		top: 50%;
		-webkit-transition: opacity .3s;
		transition: opacity .3s;
		width: 20px
	}

	.touch.single-post .arrow:hover:after {
		opacity: .75
	}

	.showheader.single-post .arrow,
	.page.single-post .arrow {
		-webkit-transform: translateY(350px);
		transform: translateY(350px)
	}

	.single-post .arrow.next {
		left: 0
	}

	.single-post .arrow.next .color {
		right: 100%
	}

	.single-post .arrow.next:hover .color {
		right: 0
	}

	.single-post .arrow.next:after {
		content: "<"
	}

	.touch.single-post .arrow.next:hover .color {
		right: 100%
	}

	.single-post .arrow.previous {
		right: 0
	}

	.single-post .arrow.previous .color {
		left: 100%
	}

	.single-post .arrow.previous:hover .color {
		left: 0
	}

	.touch.single-post .arrow.previous:hover .color {
		left: 100%
	}

	.single-post .arrow .color {
		height: 100%;
		position: absolute;
		-webkit-transition: background-color .3s ease-in-out .05s, left .3s, right .3s;
		transition: background-color .3s ease-in-out .05s, left .3s, right .3s;
		width: 100%
	}

	.js .single-post .arrow.next.hide {
		left: -50px
	}

	.js .single-post .arrow.previous.hide {
		right: -50px
	}

	.showheader .header,
	.page .header {
		height: 350px
	}

	.js .intro .header {
		-webkit-transform: translateY(-52px);
		transform: translateY(-52px)
	}

	.header h1 {
		font-size: 28px;
		margin: 29px 0 25px
	}

	.header .container {
		top: 135px
	}

	.header .page:before {
		display: none
	}

	.panels {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		overflow: hidden;
		position: absolute;
		width: 100%;
	}

	.js .hidehome .panels {
		opacity: 1
	}

	.panel {
		padding-bottom: 0;
		width: 20%;
	}

	.js .intro .panel,
	.js .hidehome .panel {
		-webkit-transform: translateY(100%);
		transform: translateY(100%)
	}

	.panel .footer {
		bottom: 0
	}

	.hover .panel:hover .footer {
		-webkit-transform: scaleY(1);
		transform: scaleY(1)
	}

	.hover .panel.selected:hover .footer {
		-webkit-transform: scaleY(0);
		transform: scaleY(0)
	}

	.panel .content {
		height: 100%;
		position: absolute;
		width: 100%;
	}

	.panel .content .fixed {
		padding: 50px 30px 0;
		width: 100%;
	}

	.panel .content .fixed h1 {
		font-family: "OPPOSans-H";
		text-align: center;
		font-size: 2.16rem;
		line-height: 1.2;
	}

	.panel .content .fixed h1 span {
		display: inline-block;
		font-size: 6.4rem;
	}

	.panel .content .fixed h3 {
		font-family: "OPPOSans-H";
		text-align: center;
		font-size: 3.3rem;
		line-height: 1.4;
	}

	.hover .panel {
		background-color: #373737;
		color: #666
	}

	.hover .panel:hover,
	.hover .panel.selected {
		background-color: #888;
		color: #fff
	}

	.hover .panel:hover .excerpt,
	.hover .panel.selected .excerpt {
		opacity: 1
	}

	.hover .panel.shrink-right .color {
		-webkit-transform: scaleX(.92188)translate3d(12.5px, 0, 0);
		transform: scaleX(.92188)translate3d(12.5px, 0, 0)
	}

	.hover .panel.shrink-left .color {
		-webkit-transform: scaleX(.92188)translate3d(-12.5px, 0, 0);
		transform: scaleX(.92188)translate3d(-12.5px, 0, 0)
	}

	.hover .panel.expand .color {
		-webkit-transform: scaleX(1.15625)translate3d(0, 0, 0);
		transform: scaleX(1.15625)translate3d(0, 0, 0)
	}

	.mm .hover .decolor {
		background-color: #373737
	}

	.mm .hover .decolor:hover,
	.mm .hover .decolor.selected {
		background-color: #888
	}

	.mm .hover .offblack {
		background-color: #090909
	}

	.mm .hover .offblack:hover,
	.mm .hover .offblack.selected {
		background-color: #181818
	}

	.mm .hover .orange {
		background-color: #5d352b
	}

	.mm .hover .orange:hover,
	.mm .hover .orange.selected {
		background-color: #e8846b
	}

	.mm .hover .navy {
		background-color: #082139
	}

	.mm .hover .navy:hover,
	.mm .hover .navy.selected {
		background-color: #16528e
	}

	.mm .hover .red {
		background-color: #5c1e1e
	}

	.mm .hover .red:hover,
	.mm .hover .red.selected {
		background-color: #e54b4b
	}

	.mm .hover .lime {
		background-color: #414f4d
	}

	.mm .hover .lime:hover,
	.mm .hover .lime.selected {
		background-color: #a2c5bf
	}

	.mm .hover .green {
		background-color: #083233
	}

	.mm .hover .green:hover,
	.mm .hover .green.selected {
		background-color: #167c80
	}

	.mm .hover .blue {
		background-color: #003451
	}

	.mm .hover .blue:hover,
	.mm .hover .blue.selected {
		background-color: #0082c8
	}

	.mm .hover .purple {
		background-color: #2e272c
	}

	.mm .hover .purple:hover,
	.mm .hover .purple.selected {
		background-color: #72616e
	}

	.article {
		padding-top: 45px
	}

	.single-post .article {
		padding-left: 30px;
		padding-right: 30px
	}

	.decolor .article {
		border-left: 8px solid #888;
		border-right: 8px solid #888
	}

	.offblack .article {
		border-left: 8px solid #181818;
		border-right: 8px solid #181818
	}

	.orange .article {
		border-left: 8px solid #e8846b;
		border-right: 8px solid #e8846b
	}

	.navy .article {
		border-left: 8px solid #16528e;
		border-right: 8px solid #16528e
	}

	.red .article {
		border-left: 8px solid #e54b4b;
		border-right: 8px solid #e54b4b
	}

	.lime .article {
		border-left: 8px solid #a2c5bf;
		border-right: 8px solid #a2c5bf
	}

	.green .article {
		border-left: 8px solid #167c80;
		border-right: 8px solid #167c80
	}

	.blue .article {
		border-left: 8px solid #0082c8;
		border-right: 8px solid #0082c8
	}

	.purple .article {
		border-left: 8px solid #72616e;
		border-right: 8px solid #72616e
	}

	.wrap404 {
		background-image: url(http://placekitten.com/g/1700/900)
	}

	.wrap404 h1 {
		font-size: 250px
	}
}

@media (min-width:720px) {
	.closebutton {
		border-radius: 38px;
		height: 38px;
		width: 38px
	}

	.closebutton:after {
		height: 36px;
		line-height: 36px;
		width: 36px
	}

	.single-post .arrow {
		width: 50px
	}

	.single-post .arrow:after {
		font-size: 60px;
		font-weight: 500;
		opacity: .75;
		width: 50px
	}

	.header h1 {
		font-size: 36px
	}

	.header .container {
		font-size: 18px
	}

	.header .content {
		width: 700px
	}

	.single-post .article {
		padding-left: 0;
		padding-right: 0
	}
}

@media (min-width:950px) {
	.closecontainer {
		left: 50%;
		margin-left: -475px
	}

	.decolor .article {
		border-left: 5px solid #7b7b7b;
		border-right: 5px solid #7b7b7b
	}

	.offblack .article {
		border-left: 5px solid #151515;
		border-right: 5px solid #151515
	}

	.orange .article {
		border-left: 5px solid #d37861;
		border-right: 5px solid #d37861
	}

	.navy .article {
		border-left: 5px solid #144a81;
		border-right: 5px solid #144a81
	}

	.red .article {
		border-left: 5px solid #d04444;
		border-right: 5px solid #d04444
	}

	.lime .article {
		border-left: 5px solid #93b3ad;
		border-right: 5px solid #93b3ad
	}

	.green .article {
		border-left: 5px solid #147074;
		border-right: 5px solid #147074
	}

	.blue .article {
		border-left: 5px solid #0076b6;
		border-right: 5px solid #0076b6
	}

	.purple .article {
		border-left: 5px solid #675864;
		border-right: 5px solid #675864
	}
}

@-webkit-keyframes next-load {
	0% {
		-webkit-transform: rotate(0)
	}

	100% {
		-webkit-transform: rotate(72deg)
	}
}

@keyframes next-load {
	0% {
		-webkit-transform: rotate(0);
		transform: rotate(0)
	}

	100% {
		-webkit-transform: rotate(72deg);
		transform: rotate(72deg)
	}
}

@-webkit-keyframes load-spin {
	0% {
		-webkit-transform: rotate(0)
	}

	100% {
		-webkit-transform: rotate(72deg)
	}
}

@keyframes load-spin {
	0% {
		-webkit-transform: rotate(0);
		transform: rotate(0)
	}

	100% {
		-webkit-transform: rotate(72deg);
		transform: rotate(72deg)
	}
}

@-webkit-keyframes fly {
	from {
		background-position: 0 0
	}

	to {
		background-position: 0 -144px
	}
}

@keyframes fly {
	from {
		background-position: 0 0
	}

	to {
		background-position: 0 -144px
	}
}

@-webkit-keyframes fly-intro {
	from {
		background-position: 0 0
	}

	to {
		background-position: 0 -144px
	}
}

@keyframes fly-intro {
	from {
		background-position: 0 0
	}

	to {
		background-position: 0 -144px
	}
}

@-webkit-keyframes logo-jump {

	45%,
	55% {
		-webkit-transform: scaleY(.75)
	}

	75% {
		-webkit-transform: scaleY(1.1)translateY(-10px)
	}
}

@keyframes logo-jump {

	45%,
	55% {
		-webkit-transform: scaleY(.75);
		transform: scaleY(.75)
	}

	75% {
		-webkit-transform: scaleY(1.1)translateY(-10px);
		transform: scaleY(1.1)translateY(-10px)
	}
}